<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>老师列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">

      <el-dialog title="添加讲师" :title="teacherForm.id==null?'添加讲师信息':'编辑讲师信息'" :visible.sync="dialogFormVisible" :append-to-body=true>

        <el-form  :model="teacherForm" :rules="rules"  ref="teacherForm" label-width="80px">

          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="头像">
                <el-upload
                  class="avatar-uploader"
                  action="/api/education-user/eduTeacher/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="teacherForm.picImg!=null" :src="'/api/education-user/eduTeacher/download/'+teacherForm.picImg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="登录名" prop="loginName">
                <el-input v-model="teacherForm.loginName" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="密码" prop="loginPwd">
                <el-input v-model="teacherForm.loginPwd" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="姓名" prop="fullName">
                <el-input v-model="teacherForm.fullName" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="职位" prop="isStar">
                <el-select v-model="teacherForm.isStar" placeholder="选择职位">
                  <el-option label="高级讲师" :value="0"></el-option>
                  <el-option label="首席讲师" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="teacherForm.remarks" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="teacherForm.sort" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <el-form :model="teacher" class="demo-form-inline" >
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="4">
              <el-input placeholder="讲师名称" v-model="teacher.fullName"></el-input>
            </el-col>
            <el-button @click="searchList" plain  type="info">搜索</el-button>
            <el-button @click="addSave" type="primary">添加讲师</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="loginName"
          label="登录名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="loginPwd"
          label="登录密码"
          width="150">
        </el-table-column>
        <el-table-column
          prop="fullName"
          label="姓名"
          width="150">
        </el-table-column>
        <el-table-column
          label="头像"
          width="150">
          <template slot-scope="scope">
            <img  v-if="scope.row.picImg!=null" :src="'/api/education-user/eduTeacher/download/'+scope.row.picImg" width="50px" height="50px">
          </template>
        </el-table-column>
        <el-table-column
          label="职位"
          width="150">
          <template slot-scope="scope">
            {{scope.row.isStar | isStarFit}}
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="250">
        </el-table-column>
        <el-table-column
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button @click="updateById(scope.row.id)" type="text" size="small">修改</el-button>
            <el-button @click="delUser(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button v-if="scope.row.generate==0" @click="generatePage(scope.row.id)" type="text" size="small">生成静态页</el-button>
            <el-button v-if="scope.row.generate==1" @click="delPage(scope.row.id)" type="text" size="small">删除静态页</el-button>
          </template>
        </el-table-column>


      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


    </el-card>

  </div>
</template>

<script>
    export default {
      name: "TeacherList",
      data(){
        return{
          tableData:[],
          teacher:{},
          currentPage:0,
          pageSize:3,
          total:0,
          dialogFormVisible:false,
          teacherForm:{picImg:''},
          auth:{},
          rules:{
            loginName: [{ required: true, message: '请输入登录名称', trigger: 'blur' }],
            loginPwd: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
            fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            isStar: [{ required: true, message: '请输入职业', trigger: 'blur'}],
            remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
            sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
          }
        }
      },
      methods:{
        //列表页面
        searchList:function () {
          this.$http.post("/education-user/eduTeacher/list/"+this.currentPage+"/"+this.pageSize,this.teacher).then((res)=>{
            this.tableData=res.data.result.list;
            this.total=res.data.result.total;
          })
        },
        //添加
        addSave:function(){
          this.dialogFormVisible=true;
        },
        save:function(){
          this.$refs['teacherForm'].validate((valid) => {
            if (!valid) {
              return
            }

            if(this.teacherForm.id==null){
              this.$http.post("/education-user/eduTeacher/addSave", this.teacherForm).then((res) => {
                if (res.data.success) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })

                  this.teacherForm = {}
                  this.searchList();
                } else {
                  this.$message.error(res.data.message)
                }
                this.dialogFormVisible = false
                this.searchList();
              })
            }else{
              this.$http.post("/education-user/eduTeacher/updateTeacher", this.teacherForm).then((res) => {
                if (res.data.success) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })

                  this.teacherForm = {}
                  this.searchList();
                } else {
                  this.$message.error(res.data.message)
                }

                this.dialogFormVisible = false
                this.searchList();
              })
            }
          })
        },
        //删除
        delUser:function(id){
          this.$http.get("/education-user/eduTeacher/delUser/"+id).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
            } else {
              this.$message.error(res.data.message)
            }
            this.searchList();
          })
        },
        updateById:function(id){
          this.dialogFormVisible=true;
          this.$http.get("/education-user/eduTeacher/findTeacher/"+id).then((res)=>{
            if(res.data.success){
              this.teacherForm=res.data.result;
            }else{
              this.$message.error(res.data.message)
            }
          })
        },
        generatePage:function(id){//生成静态页
          this.$http.get("/education-user/eduTeacher/generatePage/"+id).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.searchList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        delPage:function(id){//删除静态页
          this.$http.get("/education-user/eduTeacher/delPage/"+id).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.searchList()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize=val;
          this.searchList();
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this.searchList();
        },
        //上传
        handleAvatarSuccess(res, file) {//上传完成后回调
          debugger
          //alert(res.result.path);
          this.teacherForm.picImg=res.result.path;
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/png 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
      },
      filters: {
        isStarFit: function (v1) {
          if (v1 == 0) return '高级讲师'
          if (v1 == 1) return '首席讲师'
        }
      },
      mounted() {
        this.searchList();
      }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
